<template>
  <el-card style="max-width: 100%">

    <el-container class="main-container">
      <el-aside class="sidebar">
        <el-menu active-text-color="#409EFF" background-color="#FFFAFA" class="el-menu-vertical-demo" default-active="2"
                 text-color="#fff">

          <el-menu-item @click="WX">
            <el-icon style="color: #666666">
              <ChatDotRound/>
            </el-icon>
            <span style="color: #666666">微信</span>
          </el-menu-item>

          <el-menu-item @click="ZB">
            <el-icon style="color: #666666">
              <ChatRound/>
            </el-icon>
            <span style="color: #666666">支付宝</span>
          </el-menu-item>

          <el-menu-item @click="YL">
            <el-icon style="color: #666666">
              <Files/>
            </el-icon>
            <span style="color: #666666">银联</span>
          </el-menu-item>

        </el-menu>
      </el-aside>
      <el-main class="content">
        <RouterView>
          <div v-if="ZF == 1">
            <div style="display: flex; align-items: center;">
              <div class="g">
                <img src="D:\Java_code\mall\front\pic\g.png" style="height: 150px; width: 150px; margin-left: 50px" />
              </div>
              <div style="display: flex; flex-direction: column; margin-left: 50px">
                当前余额：<el-input v-model="YE" style="width: 200px; margin-bottom: 30px" disabled />
                <div style="display: flex; align-items: center;">
                  充值余额：<el-input v-model="XJ.money" style="width: 200px" placeholder="请输入充值金额" />
                  <el-button style="width: 50px; height: 50px; margin-left: 10px" type="primary" size="small" @click="updateMoney">充值</el-button>
                </div>
              </div>
            </div>
          </div>

          <div v-if="ZF == 2">
            <div style="display: flex; align-items: center;">
              <div class="g">
                <img src="D:\Java_code\mall\front\pic\h.jpg" style="height: 150px; width: 150px; margin-left: 50px" />
              </div>
              <div style="display: flex; flex-direction: column; margin-left: 50px">
                当前余额：<el-input v-model="YE" style="width: 200px; margin-bottom: 30px" disabled />
                <div style="display: flex; align-items: center;">
                  充值余额：<el-input v-model="XJ.money" style="width: 200px" placeholder="请输入充值金额" />
                  <el-button style="width: 50px; height: 50px; margin-left: 10px" type="primary" size="small" @click="updateMoney">充值</el-button>
                </div>
              </div>
            </div>
          </div>

          <div v-if="ZF == 3">
            <div style="display: flex; align-items: center;">
              <div class="g">
                <img src="D:\Java_code\mall\front\pic\i.jpg" style="height: 150px; width: 150px; margin-left: 50px" />
              </div>
              <div style="display: flex; flex-direction: column; margin-left: 50px">
                当前余额：<el-input v-model="YE" style="width: 200px; margin-bottom: 30px" disabled />
                <div style="display: flex; align-items: center;">
                  充值余额：<el-input v-model="XJ.money" style="width: 200px" placeholder="请输入充值金额" />
                  <el-button style="width: 50px; height: 50px; margin-left: 10px" type="primary" size="small" @click="updateMoney">充值</el-button>
                </div>
              </div>
            </div>
          </div>
        </RouterView>
      </el-main>
    </el-container>

  </el-card>
</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import {ChatDotRound, ChatRound, Files} from "@element-plus/icons-vue";

const ZF = ref();
const YE = ref({
  money: 0
});

const XJ = ref({
  id: null,
  money: null
});

//充值金额
function updateMoney() {
  userApi.updateMoney(XJ.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          money();
          XJ.value = {
            id: null,
            money: null
          };
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//余额
function money() {
  userApi.monkey()
      .then(resp => {
        YE.value = resp.data.money;
      });
}

//微信
function WX() {
  ZF.value = 1;
}

//支付宝
function ZB() {
  ZF.value = 2;
}

//银联
function YL() {
  ZF.value = 3;
}

money();
</script>

<style scoped>
.g {
  margin-top: 0px;
}

</style>